<template>
	<view class="content">
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
			<uni-row :gutter="12" class="">
				<uni-col :span="12" v-for="item in dataList" :key="item.id" @click="viewPost(item.id)">
					<view class="item" @click="viewPost(item.id)">
						<view class="item-image-wrap">
							<u--image class="item-image" width="100%" height="500rpx" :showLoading="true"
								:lazyLoad="true" :src="item.pic" mode="aspectFill">
								<template v-slot:loading>
									<u-loading-icon></u-loading-icon>
								</template>
							</u--image>
							<view class="title-wrap">
								<rich-text :nodes="item.title" class="u-line-1 title"></rich-text>
							</view>
						</view>
						<view class="summary-wrap">
							<rich-text :nodes="item.summary" class="u-line-2 summary"></rich-text>
						</view>
					</view>
				</uni-col>
			</uni-row>
		</mescroll-uni>
	</view>
</template>

<script>
	import {
		list
	} from "../../api/mitoPost"
	import MescrollMixin from "../../uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	export default {
		name: "post-list",
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				queryParams: {
					sortField: ""
				},
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {

				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 6, // 配置列表的总数量要大于等于10条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: "没有更多了",
					offset: uni.$u.getPx('3100rpx')
				},
				// 列表数据
				dataList: []
			}
		},
		mounted() {
			// this.query()

		},
		methods: {
			/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback() {
				this.restQueryParams()
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				list({
					...this.queryParams,
					pageNum,
					pageSize
				}).then(res => {
					const {
						content,
						last,
						totalElements
					} = res
					//设置列表数据
					if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
					this.dataList.push(...content); //追加新数据
					this.mescroll.endBySize(content.length, totalElements);
				}).catch(() => {
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				})

			},
			restQueryParams() {
				this.dataList = []
			},
			viewPost(id) {
				uni.$u.route({
					url: "pages/post-detail/post-detail",
					params: {
						id
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {

		.item {
			background-color: $u-bg-color;
			margin-bottom: 12rpx;
			display: flex;
			flex-direction: column;

			.item-image-wrap {
				position: relative;
				height: 500rpx;

				.item-image {
					width: 100%;
					height: auto;
				}
			}

			.title-wrap {
				padding: 8rpx 8rpx;
				box-sizing: border-box;
				background-color: rgba(0, 0, 0, 0.3);
				color: $u-primary-light;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 56rpx;
				display: flex;
				align-items: center;
			}

			.title {
				text-align: center;
				width: 100%;
			}

			.summary-wrap {
				padding: 8rpx 8rpx;

			}

			.summary {
				height: 80rpx;
				line-height: 40rpx;
			}
		}
	}
</style>
